<template>
	<view class="yingYuan">
		<div class="mb20 ">

			<view class="picker center">
				<picker class="flex1" mode="selector" range-key="cityName" :range="arealist" @change="initData">
					<div class="flex-start ">
						<div class="mr5 fw5">区域选择：{{selectedValue}}</div>
						<u-icon name="arrow-down-fill" size="12"></u-icon>
					</div>
				</picker>
				<up-search @clear="search" @search="search" v-model="keyWords" :showAction="false" placeholder="请输入关键字搜索"></up-search>
			</view>

		</div>
		<div class="bfff house bfff mb20 c999" v-for="v in yingYuanlist" :key="v.cinemaId"
			@click.stop="openPage('../dianYingYuan/xiangXi?cinemaId='+v.cinemaId)">
			<div class="align-end mb30">
				<div class="flex1 nowrap f35 c333 fbold">{{v.cinemaName}}</div>
				<div class="ctheme"> </div>
				 
			</div>
			<div class="mt10 mb15 center">
				<div class="flex1 nowrap">{{v.address}}</div>
				<div>{{v.distance}}km</div>
			</div>
			<!-- <div class="flex-start">
				<div class="tag f22 center mr20 center">3D 眼睛</div>
			</div> -->
		</div>
		<!-- 暂无更多 -->
		<u-empty v-if="yingYuanlist.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arealist: [],
				selectedValue: '全部区域',
				keyWords: '',
				index: 0
			};
		},
		props: {
			yingYuanlist: {
				type: Array,
				default: [],
			},
			city: {
				type: Object,
				default: {},
			},
		},
		watch: {
			city: {
				handler(newValue, oldValue) {
					this.getAreas()
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 点击搜索
			search() {
				this.$emit('initData', this.arealist[this.index].cityCode, this.keyWords)
			},
			// 训责区域
			initData(e) {
				this.index = e.detail.value
				this.selectedValue = this.arealist[this.index].cityName
				this.$emit('initData', this.arealist[this.index].cityCode, this.keyWords)
			},
			// 查询区
			getAreas() {
				let that = this
				this.selectedValue = '全部区域'
				this.$http('/api/getAreas', {
					cityCode: this.city.id
				}).then((r) => {
					this.arealist = [{
							cityName: '全部区域',
							cityCode: this.city.id
						},
						...r.data
					]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		border: 1rpx solid #666;
		height: 36rpx;
		border-radius: 10rpx;
		padding: 0 14rpx;
	}

	.house {
		padding: 40rpx 30rpx 30rpx;
		border-radius: 15rpx;
	}

	.picker {
		padding: 10px;
		background-color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}

	.fw5 {
		font-weight: 700;
	}
</style>